<template>
  <div id="userDetails">
    <p style="background-color: rgb(51, 61, 73);color:#fff;padding: 1% 2%;margin-bottom: 20px;"> 用户详情</p>
    <div style="padding: 1% 5%;flex:1;">
      <div class="userDetails-left">
        <el-form :model="infoList" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户ID">
            <el-input v-model="infoList.b"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="infoList.c"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="infoList.d"></el-input>
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input v-model="infoList.e"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-input v-model="infoList.f"></el-input>
          </el-form-item>
          <el-form-item label="权限">
            <el-input v-model="infoList.g"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="userDetails-right">
        <div class="Tree">
          <p>该账户拥有的操作权限</p>
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="searchVal"
          ></el-input>
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[1]"
            :props="defaultProps">
          </el-tree>
        </div>
      </div>
    </div>
    <div class="btn">
      <el-button @click="CloseDiv('Mybutton1','fade1')">关闭</el-button>
      <el-button @click="CloseDiv('Mybutton1','fade1')">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
#userDetails {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  p {
    // font-size: 1.6rem;
    line-height: 45px;
  }
  .userDetails-left {
    width: 45%;
    float: left;
    margin-right: 5%;
  }
  .userDetails-right {
    width: 50%;
    height: 90%;
    float: left;
    position: relative;
    p {
      padding: 0 2%;
      background-color: #eee;
    }
    .Tree {
      width: 100%;
      height: 100%;
      border: 5px #eee solid;
    }
  }
  .btn{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .el-button{
      float: right;
      color: #fff;
  }
  .el-button:first-of-type{
    color: #000;
  }
  .el-button:last-of-type{
      background-color: RGB(51,61,73);
      border-color: RGB(51,61,73);
      margin-right: 15px;
  }
}
</style>
<script>
// import $ from 'jquery'
export default {
  components: {},
  data() {
    return {
        infoList: {
            id: 1,
            a: "",
            b: "",
            c: "",
            d: "",
            e: "",
            f: "",
            g: "",
        },
        data: [
          {
              id: 1,
              label: "首页",
              children: []
          },{
            id: 2,
            label: "房源信息管理系统",
            children: [
                {
                    id: 21,
                    label: "数据统计",
                },{
                    id: 22,
                    label: "房源信息管理",
                },{
                    id: 23,
                    label: "房源入库管理",
                },{
                    id: 24,
                    label: "房源修改审批",
                },{
                    id: 25,
                    label: "小区信息管理",
                },{
                    id: 26,
                    label: "配建房台账管理",
                },
            ],
        },{
            id: 3,
            label: "计划调拨管理系统",
            children: [
                {
                    id: 31,
                    label: "计划调拨",
                },{
                    id: 32,
                    label: "调拨管理",
                },{
                    id: 33,
                    label: "配建房分配管理",
                },{
                    id: 34,
                    label: "结算管理",
                },
            ],
        },{
            id: 4,
            label: "产权信息化管理",
            children: [
                {
                    id: 41,
                    label: "拆迁户信息管理",
                },{
                    id: 42,
                    label: "配建房合同管理",
                },{
                    id: 43,
                    label: "产权管理",
                },{
                    id: 44,
                    label: "业主信息管理",
                },
            ],
        },{
            id: 5,
            label: "信息决策管理",
            children: [
                {
                    id: 51,
                    label: "项目进展分析",
                },{
                    id: 52,
                    label: "运行数据查询",
                },{
                    id: 53,
                    label: "决策信息管理",
                }
            ],
        },
        ],
        defaultProps: {
            children: "children",
            label: "label",
        },
        searchVal: ''
    };
  },
  methods: {
    getData(data) {
      console.log(data)
      this.infoList = data;
    },
    // 关闭弹窗
    CloseDiv(Mybutton,bg_div){
        document.getElementById(Mybutton).style.display='none';
        document.getElementById(bg_div).style.display='none';
    },
  },
  created() {},
  mounted() {},
};
</script>